<!--  -->
<template>
  <div class="category">
    <van-search
      style="width: 100%"
      shape="round"
      @click.stop="toSearch"
      placeholder="请输入搜索关键词"
    />
    <div class="category_body">
      <div class="left">
        <van-sidebar
          v-model="active"
          style="height: 90vh; width: 100%; background-color: #f7f8fa"
        >
          <van-sidebar-item
            :title="item.name"
            v-for="item in state.categoryList"
            :key="item.id"
            @click="onChange(item.id)"
          />
        </van-sidebar>
      </div>
      <div class="right" style="width: 80%">
        <div class="right_top">
          <img :src="state.currentCategory.img_url" alt="" />
          <h3>{{ state.currentCategory.front_name }}</h3>
        </div>
        <div class="right_body">
          <span style="font-weight: bold; color: #d9d9d9">———</span>
          <div class="p">{{ state.currentCategory.name }}</div>

          <span style="font-weight: bold; color: #d9d9d9">———</span>
        </div>
        <div class="right_footer">
          <div
            class="box"
            v-for="item in state.currentCategory.subCategoryList"
            :key="item.id"
          >
            <img :src="item.wap_banner_url" alt="" />
            <p>{{ item.name }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import { getAllCategory, getCatalogCurrent } from "@/api/api.ts";
import { useRouter } from "vue-router";
const router = useRouter();
let active = ref(0);
function toSearch() {
  router.push({ path: "/home/search" });
}
const state = reactive({
  categoryList: [],
  // 分类数据
  currentCategory: {},
});
const onChange = async (id) => {
  console.log(active.value);
  const res = await getCatalogCurrent(id);
  state.currentCategory = res.data.currentCategory;
};

onMounted(() => {
  getAllCategory().then((res) => {
    console.log(res);
    state.categoryList = res.data.categoryList;
    state.currentCategory = res.data.currentCategory;
  });
});
</script>

<style lang="scss" scoped>
.category {
  width: 100%;
}
.category_body {
  display: flex;
  width: 100%;
}
.left {
  width: 20%;
}
.right {
  width: 80%;
  background-color: #fff;
}
.right_top {
  width: 100%;
  height: 280px;
  position: relative;
  padding: 0 14px;
}
.right_top img {
  display: block;
  border-radius: 5px;
  box-shadow: 0 0 6px #000;
  width: 99%;
  height: 100%;
  filter: brightness(0.6);
}
.right_top h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px;
  color: #fff;
  font-weight: normal;
  text-align: center;
  width: 100%;
}
.right_body {
  display: flex;
  font-size: 36px;
  width: 100%;
  justify-content: center;
  height: 80px;
  align-items: center;
}
.p {
  padding: 0 30px;
}
.right_footer {
  width: 100%;
  display: flex;
  flex-flow: wrap;
}
.box {
  width: 33%;
  height: 180px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  font-weight: normal;
  color: #646566;
}
.box img {
  width: 56px;
  height: 56px;
}
</style>
